<template>
    <el-row class="home" :gutter="20">
        <el-col :span="8" style="margin-top: 20px">
            <el-card shadow="hover" >
                <div class="user">
                        <img :src="userImg"/>
                        <div class="userinfo">
                            <p class="name">大户爱</p>
                            <p class="access">番名:奇蛋物语</p>
                        </div>
                </div>
                        <div class="login-info"> 
                            <p class="">上次登录时间:<span>2022-4-13</span></p>
                            <p class="">上次登录地点:<span>株洲</span></p>
                        </div>
            </el-card>
            <el-card shadow="hover" style="margin-top:20px ; height:450px">
                    <el-table :data="tableData">
                        <el-table-column
                            v-for="(val,key) in tablelabel"
                            :key="key"
                            :prop="key"
                            :label="val">
                        </el-table-column>
                    </el-table>
            </el-card>
        </el-col>
        <el-col :span="16">
            <div class="num">
                <el-card v-for="item in countData" :key="item.name" :body-style="{ display: 'flex' ,padding: 0  }"> 
                        <i class="icon" :class="'el-icon-'+item.icon" :style="{background: item.color}"></i>
                        <div class="detail">
                            <p class="num1">￥{{item.value}}</p>
                            <p class="txt">{{item.name}}</p>
                        </div>
               </el-card>
            </div>               
            <el-card style="height:280px;margin-top:30px">
                <!-- <div style="height:280px;" ref="echarts"></div> -->
                <echart :charData="echartData.order" style="height:280px;" />
            </el-card>
            <div class="graph" style="margin-top:15px">
                <el-card style="height:260px;width:48%;float: left">
                    <!-- <div style="height:240px" ref="userEcharts"></div> -->
                    <echart :charData="echartData.user" style="height:240px;" />
                </el-card>
                <el-card style="height:260px;width:48%;float: right">
                    <!-- <div style="height:260px" ref="videoEcharts"></div> -->
                    <echart :charData="echartData.video" :isAxisChart="false" style="height:240px;" />
                </el-card>
            </div>
        </el-col>
    </el-row>
</template>

<style lang="less">
.user{
    display: flex;
    img{
        height:150.6px;
        width:150.6px;
        border-radius: 50%;
    }
    .userinfo{
        text-align:center;
        margin-top: 15px;
        margin-left: 50px;
        .name{
            font-size: 34px;
            font-weight: 350;
        }
        .access{
            color: #888;
        }
    }
}
.login-info{
    margin-top: 30px;
    border-top: 1px solid #ddd;
    color: #888;
    span{
        margin-left: 50px;
        color: #000;
    }
}
.num{
    display: flex;
    width: 100%;
    flex-wrap: wrap;
    padding-top: 20px;
    div{
        width: 300px;
        margin-left: 1%;
    }
    i{
        // justify-content: center;
        // align-items: center;
        text-align: center;
        line-height: 90px;
        width: 30px;
    }
    .num1{
        font-weight: 700;
        font-size: 20px;
    }
    .detail{
        margin-left: 35px;
    }
    .graph{
        float: left;
    }

}  
</style>>

<script>
import { getData } from '../../api/data'
// import * as echarts  from 'echarts'
import Echart from '../../src/components/ECharts.vue'

export default {
    name: 'H-ome',
    components:{
        Echart
    },
    data(){
        return {
            userImg:require('../../src/assets/image/03.jpg'),
            tableData:[],
            tablelabel:{
                name:'品牌',
                todayBuy:'今日购买',
                monthBuy:'本月购买',
                totalBuy:'总购买'
            },
            countData:[
            {
                name:"今日支付订单",
                value:1234,
                icon:"success",
                color:"#2ec7c9"
            },
            {
                name:"今日收藏订单",
                value:210,
                icon:"star-on",
                color:"#ffb980"
            },
            {
                name:"今日未支付订单",
                value:1234,
                icon:"s-goods",
                color:"#5ab1ef"
            },
            {
                name:"本月支付订单",
                value:1234,
                icon:"success",
                color:"#2ec7c9"
            },
            {
                name:"本月收藏订单",
                value:210,
                icon:"star-on",
                color:"#ffb980"
            },
            {
                name:"本月未支付订单",
                value:1234,
                icon:"s-goods",
                color:"#5ab1ef"
            }
            ],
            echartData:{
                order:{
                    xData:[],
                    series:[]
                },
                user:{
                    xData:[],
                    series:[]
                },
                video:{
                    series:[]
                }
            }
        }
    },
    mounted() {
        getData().then(res => {
            const { code, data } = res.data
            if(code === 20000){
                this.tableData = data.tableData
                const order = data.orderData
                const xData = order.date
                const keyArray = Object.keys(order.data[0])
                const series = []
                keyArray.forEach(key => {
                    series.push({
                        name: key,
                        data:order.data.map(item => item[key]),
                        type:'line'
                    })
                })
                this.echartData.order.xData = xData
                this.echartData.order.series = series
                this.echartData.user.xData = data.userData.map(item => item.date),
                this.echartData.user.series = [
                        {
                            name:'新增用户',
                            data:data.userData.map(item => item.new),
                            type:'bar'
                        },
                        {
                            name:'活跃用户',
                            data:data.userData.map(item => item.active),
                            type:'bar'
                        },
                    ]
                this.echartData.video.series = [
                        {

                            data:data.videoData,
                            type:'pie'
                        }
                    ]

            }
            // console.log(res)
        })
    },
}
</script>